<template>
  <div class="content AllGoods fxc fx-1">
    <div class=" title fx-jc-ac ">
      <h3>商品列表</h3>
    </div>
    <div class="allGoods-body fxc fx-j-b fx-1">
      <template>
        <!-- 商品列表 -->
        <all-table v-bind:dataList=products v-bind:headerTitle=headerTitle @getFruit='getFruit' @loseFruit='loseFruit' @setEmpty='setEmpty' @deleteFruit='deleteFruit' @lookDetail='lookDetail'>
          <template slot="table-column">
            <p>Here's some contact info</p>
          </template>
        </all-table>
      </template>
      <div class="products-page fx-jc-ac">
        <template>
          <products-page @pageChage="pageChage"></products-page>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import AllTable from './components/Table.vue'
import ProductsPage from './components/ProductsPage.vue'
export default {
  name: 'AllGoods',
  components: {
    AllTable,
    ProductsPage
  },
  data () {
    return {
      page: {
        page: '1',
        pageSize: '5'
      }
    }
  },
  mounted () {
    this['drugStore/getProducts'](this.page)
  },
  computed: {
    ...mapState({
      headerTitle: state => state.drugStore.headerTitle
    }),
    ...mapGetters({
      products: 'drugStore/getAllProducs'
    })
  },
  methods: {
    ...mapActions(['drugStore/getProducts']),
    ...mapMutations([
      'drugStore/getFruit',
      'drugStore/loseFruit',
      'drugStore/setEmpty',
      'drugStore/deleteFruit'
    ]),
    getFruit (data) {
      this['drugStore/getFruit'](data)
    },
    loseFruit (data) {
      this['drugStore/loseFruit'](data)
    },
    deleteFruit (data) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this['drugStore/deleteFruit'](data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    setEmpty (data) {
      this['drugStore/setEmpty'](data)
    },
    lookDetail (data) {
      // console.log(data)
      // this.$router.push({
      //   name: 'goodDetail',
      //   params: { id: data.id }
      // })
      const { href } = this.$router.resolve({
        name: 'goodDetail',
        params: {
          id: data.id
        }
      })
      window.open(href, '_blank')
    },
    pageChage (data) {
      this.page.page = data
      this['drugStore/getProducts'](this.page)
    }
  }
}
</script>

<style scoped lang='scss'>
.AllGoods {
  height: 100%;
}
.title {
  height: 60px;
  margin: 30px;
}
.products-page {
  width: 100%;
  height: 80px;
}
.allGoods-body {
  width: 100%;
  height: calc(100% - 120px);
}
.products-page {
  margin: 30px 0;
}
</style>
